<template>
    <div class="app-container pull-height">
        <el-container>
            <el-header>
                <div style="display: flex;justify-content: flex-start;">
                    <el-button type="text">会员管理</el-button>
                </div>
            </el-header>
            <el-main>
                <!-- 商品表格展示 -->
                <el-table ref="multipleTable" :data="memberList" height="500" tooltip-effect="dark" style="width: 100%"
                >
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src=scope.row.image>
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="客户名">
                    </el-table-column>
                    <el-table-column prop="uniformCreditCode" label="统一信用代码">
                    </el-table-column>
                    <el-table-column prop="mark" label="代号">
                    </el-table-column>
                    <el-table-column prop="encoding" label="编号">
                    </el-table-column>
                    <el-table-column prop="area" label="区域">
                    </el-table-column>
                    <el-table-column prop="totalMoney" label="充值总额（万）" v-if="role === 'manager' || (sid === '6' &&  end === 'm'  )">
                        <template slot-scope="scope">
                            {{ scope.row.totalMoney }}万
                        </template>
                    </el-table-column>                  
                    <el-table-column label="状态" >
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.totalMoney >= 1200">会员</el-tag>
                            <el-tag type="warning" v-if="scope.row.totalMoney < 1200">普通用户</el-tag>
                        </template>
                    </el-table-column>
                   
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="size"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            page: 1,
            size: 10,
            totalPage: 1,//总页数
            total: 1,
            memberList: [],
             //user信息
             userAll:{},
            role:"",
            sid:"",
            end:"",
        }
    },
    mounted: function () {
        // 发送请求查状态不等于1的商品
        this.findMember()
    },
    methods: {
        findMember: function () {
            this.$axios.get("finance/countClientData/" + this.page + "/" + this.size).then(res => {
                console.log(res.data);
                this.memberList = res.data.data.records
                this.page = res.data.data.current
                this.size = res.data.data.size
                this.total = res.data.data.total
                this.totalPage = res.data.data.pages
            })
        },
        //改变每页大小
        handleSizeChange(val) {
            this.pageSize = val
            this.findMember()
        },
        //改变当前页
        handleCurrentChange(val) {
            this.currentPage = val
            this.findMember()
        },
    }
}

</script>
<style scope></style>